<!-- 聊天消息列表组件 -->
<template>
  <view class="chat-message-list">
    <!-- use-chat-record-mode: 开启聊天记录模式 -->
    <!-- use-virtual-list: 开启虚拟列表模式 -->
    <!-- cell-height-mode: 使用动态高度 -->
    <!-- safe-area-inset-bottom: 底部安全区域适配 -->
    <z-paging ref="paging" v-model="messageList" use-chat-record-mode
      safe-area-inset-bottom :bottom-bg-color="bgColor"
      @query="queryMessageHistory" @keyboardHeightChange="keyboardHeightChange"
      @hidedKeyboard="hidedKeyboard" :bg-color="bgColor">

      <template #top>
        <slot name="top"></slot>
      </template>

	  <!-- for循环渲染聊天记录列表 -->
	  <view v-for="(item,index) in messageList" :key="index" style="position: relative;">
        <!-- transform: scaleY(-1) 必须添加，用于反转聊天项 -->
        <view style="transform: scaleY(-1)">
          <chat-message
            :message="item"
            @long-press="onMessageLongPress"
            @resend="onMessageResend"
            @preview-image="onImagePreview"
            @add-wechat="onAddWeChat"
            @complete-wechat="onCompleteWeChat"
            @view-wechat="onViewWeChat"
          />
        </view>
      </view>

      <!-- 底部插槽 -->
      <template #bottom>
        <slot name="bottom"></slot>
      </template>
    </z-paging>
    
    <!-- 添加微信弹窗组件 -->
    <wechat-popup
      :show.sync="showWechatPopup"
      :existing-wechat="existingWechat"
      :message-id="popupMessageId"
      :target-id="popupTargetId"
      @confirm="onWechatPopupConfirm"
      @cancel="onWechatPopupCancel"
    />
  </view>
</template>

<script>
import ChatMessage from './ChatMessage.vue';
import WechatPopup from './WechatPopup.vue'; // 引入微信弹窗组件

export default {
  name: 'ChatMessageList',
  components: {
    ChatMessage,
    WechatPopup // 注册微信弹窗组件
  },
  props: {
    // 背景颜色
    bgColor: {
      type: String,
      default: '#020303'
    },
    // 聊天对象ID
    targetId: {
      type: [String, Number],
      required: true
    },
    // 每页消息数量
    pageSize: {
      type: Number,
      default: 20
    },
    // 是否自动加载历史消息
    autoLoad: {
      type: Boolean,
      default: true
    },
    // 对方是否在线
    isTargetOnline: {
      type: Boolean,
      default: true
    },
    // 是否可以添加对方微信 (新增属性)
    canAddWechat: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      messageList: [], // 消息列表
      keyboardHeight: 0, // 键盘高度
      // 添加微信弹窗相关数据
      showWechatPopup: false, // 显示微信弹窗
      existingWechat: '', // 已有的微信号
      popupMessageId: '', // 弹窗关联的消息ID
      popupTargetId: '' // 弹窗关联的目标用户ID
    }
  },
  methods: {
    // 重新加载消息
    reload() {
      this.$refs.paging.reload();
    },

    // 清空消息
    clear() {
      this.messageList = [];
    },

    // 查询历史消息
    queryMessageHistory(pageNo, pageSize) {
      // 获取当前列表中最后一条消息的ID作为lastMessageId
      let lastMessageId = null;
      if (pageNo > 1 && this.messageList.length > 0) {
        // 查找最后一条非系统消息
        for (let i = this.messageList.length - 1; i >= 0; i--) {
          const msg = this.messageList[i];
          // 跳过系统消息，系统消息的userId为'system'或messageType为'system'
          if (msg.userId !== 'system') {
            lastMessageId = msg.id;
            break;
          }
        }
      }

      // 发出查询事件，由父组件处理
      this.$emit('query', {
        pageNo,
        pageSize,
        targetId: this.targetId,
        lastMessageId: lastMessageId, // 添加lastMessageId参数
        callback: (messages) => {
          this.$refs.paging.complete(messages);
        }
      });
    },

    // 添加一条新消息
    addMessage(message) {
      this.$refs.paging.addChatRecordData(message);
    },

    // 更新消息
    updateMessage(messageId, updatedData) {
      const updatedMessages = this.messageList.map(msg => {
        if (String(msg.id) === String(messageId)) {
          return { ...msg, ...updatedData };
        }
        return msg;
      });

      // 更新消息列表
      this.messageList = updatedMessages;
    },

    // 删除消息
    deleteMessage(messageId) {
      this.messageList = this.messageList.filter(msg => String(msg.id) !== String(messageId));
    },

    // 长按消息处理
    onMessageLongPress(message) {
      this.$emit('message-long-press', message);
    },

    // 重发消息处理
    onMessageResend(message) {
      this.$emit('message-resend', message);
    },

    // 图片预览处理
    onImagePreview(url) {
      this.$emit('image-preview', url);
    },
    
    // 添加微信处理
    onAddWeChat(userId) {
      this.$emit('add-wechat', userId);
    },

    // 键盘高度变化处理
    keyboardHeightChange(res) {
      this.keyboardHeight = res.height;
      this.$emit('keyboard-height-change', res);
    },

    // 键盘隐藏处理
    hidedKeyboard() {
      this.keyboardHeight = 0;
      this.$emit('keyboard-hide');
    },

    // 添加获取消息方法
    getMessage(messageId) {
      return this.messageList.find(msg => String(msg.id) === String(messageId));
    },
    
    // 判断对方是否从未回复过消息
    isTargetNeverReplied() {
      // 初始化结果对象
      const result = {
        neverReplied: true,     // 对方是否从未回复过
        unrepliedCount: 0       // 已发送但对方未回复的消息数
      };
      
      // 获取当前登录用户ID (我们假设非targetId且非system的消息都是当前用户发送的)
      const currentUserId = this.messageList.find(msg => 
        msg.userId !== 'system' && 
        String(msg.userId) !== String(this.targetId)
      )?.userId;
      
      if (!currentUserId) {
        return result; // 如果没有找到当前用户消息，返回默认结果
      }
      
      // 标记对方是否已回复过
      let targetHasReplied = false;
      // 找到对方第一次回复的消息索引
      let firstReplyIndex = -1;
      
      // 遍历消息列表查找对方回复
      for (let i = 0; i < this.messageList.length; i++) {
        const message = this.messageList[i];
        
        // 排除系统消息
        if (message.userId === 'system' || message.messageType === 'system') {
          continue;
        }
        
        // 检查是否有对方发送的消息
        if (String(message.userId) === String(this.targetId)) {
          targetHasReplied = true;
          firstReplyIndex = i;
          break;
        }
      }
      
      // 设置是否从未回复的标志
      result.neverReplied = !targetHasReplied;
      
      // 如果对方从未回复过，计算自己发送的所有消息数量
      if (result.neverReplied) {
        result.unrepliedCount = this.messageList.filter(msg => 
          msg.userId !== 'system' && 
          msg.messageType !== 'system' && 
          String(msg.userId) === String(currentUserId)
        ).length;
      } else if (firstReplyIndex > 0) {
        // 如果对方已回复过，计算对方第一次回复前自己发送的消息数量
        result.unrepliedCount = this.messageList.slice(0, firstReplyIndex)
          .filter(msg => 
            msg.userId !== 'system' && 
            msg.messageType !== 'system' && 
            String(msg.userId) === String(currentUserId)
          ).length;
      }
      
      return result;
    },
    
    // 检查并显示添加微信提示
    checkAndShowAddWeChatTip() {
      // 检查是否符合显示提示的条件
      const replyStatus = this.isTargetNeverReplied();
      
      // 条件：我发送了消息 && 对方允许添加微信
      if (replyStatus.unrepliedCount > 0 && this.canAddWechat) {
        // 检查是否已经添加过这个提示，避免重复添加
        const tipExists = this.messageList.some(msg => 
          msg.userId === 'system' && 
          msg.messageType === 'wechat_tip'
        );
        
        // 如果没有添加过提示，则添加
        if (!tipExists) {
          // 根据对方是否在线设置不同的提示内容
          let tipContent = '';
          if (this.isTargetOnline) {
            // 对方在线，提示如果长时间不回复可添加微信
            tipContent = '对方长时间未回复？添加微信沟通';
          } else {
            // 对方离线，提示对方开启了离线添加微信功能
            tipContent = '对方已开启离线添加微信功能';
          }
          
          // 创建系统提示消息
          const tipMessage = {
            id: 'wechat_tip_' + Date.now(), // 生成唯一ID
            userId: 'system',               // 系统消息
            messageType: 'wechat_tip',      // 特殊的微信提示类型
            content: tipContent,
            time: this.formatTime(new Date()),
            timestamp: Date.now(),
            showAddWeChatButton: true,      // 显示添加微信按钮
            targetId: this.targetId         // 添加目标用户ID
          };
          
          // 添加到消息列表
          this.addMessage(tipMessage);
        }
      }
    },
    
    // 格式化时间方法
    formatTime(date) {
      const hours = date.getHours().toString().padStart(2, '0');
      const minutes = date.getMinutes().toString().padStart(2, '0');
      return `${hours}:${minutes}`;
    },

    // 完成微信处理
    onCompleteWeChat(message) {
      // 判断是否为显示弹窗的请求
      if (message && message.showPopup) {
        // 显示自定义弹窗
        this.showWechatPopup = true;
        this.existingWechat = message.wechat || '';
        this.popupMessageId = message.messageId;
        this.popupTargetId = message.targetId;
      } else {
        // 原有的直接发送事件逻辑
        this.$emit('complete-wechat', message);
      }
    },
    
    // 添加微信弹窗确认处理
    onWechatPopupConfirm(data) {
      // 当弹窗点击确认时，将数据发送给父组件
      this.$emit('complete-wechat', data);
    },
    
    // 添加微信弹窗取消处理
    onWechatPopupCancel() {
      // 关闭弹窗，不需要其他操作
      this.showWechatPopup = false;
    },

    // 查看微信处理
    onViewWeChat(userId) {
      this.$emit('view-wechat', userId);
    }
  }
}
</script>

<style lang="scss">
.chat-message-list {
  flex: 1;
  position: relative;
  width: 100%;
  height: 100%;
}
</style>
